import React, { useRef } from 'react'
import styles from './index.module.scss'
import { useEffect } from 'react'
export default function Input({ extra, onExtraClick, autoFocus, ...rest }) {
  const inputRef = useRef(null)
  useEffect(() => {
    if (autoFocus) {
      inputRef.current.focus()
    }
  }, [autoFocus])
  return (
    <div className={styles.root}>
      <input ref={inputRef} className="input" {...rest} />
      {extra ? (
        <div className="extra" onClick={onExtraClick}>
          {extra}
        </div>
      ) : null}
    </div>
  )
}
